<template>
  <div>
    <el-table :data="tableData" @sort-change="sortChange" border style="width: 100%" v-loading="loading"
      @cell-dblclick="celldblclick" @selection-change="handleSelectionChange" :height="tableHeight" ref="reftable"
      @row-contextmenu="rowcontextmenu">
      <el-table-column type="selection" width="50" align="center" header-align="center" v-if="isSelection" fixed="left">
      </el-table-column>

      <el-table-column type="index" label="序号" width="50" align="center" header-align="center" fixed="left">
      </el-table-column>

      <!-- start 目录检索 -->
      <el-table-column v-if="isRetrieval && sourceType != 1" label="操作" align="center"
        class-name="small-padding fixed-width" fixed="left">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="借阅车" placement="bottom-start">
            <el-button class="jieyueche" v-show="scope.row.is_borrowing_car == '1'" type="text"
              icon="el-icon-shopping-cart-2" @click="handleBorrow(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="借阅登记单" placement="top-start">
            <el-button class="jieyueche" type="text" v-hasPermi="['archive:mljs:addDjad']" icon="el-icon-tickets"
              @click="handleRegister(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- end 目录检索 -->
      <!-- start 全文检索 -->
      <el-table-column v-if="isRetrieval && sourceType == 1" label="操作" align="center"
        class-name="small-padding fixed-width" fixed="left">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="借阅车" placement="bottom-start">
            <el-button class="jieyueche" v-show="scope.row.is_borrowing_car == '1'" type="text"
              icon="el-icon-shopping-cart-2" @click="handleBorrow(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="借阅登记单" placement="top-start">
            <el-button class="jieyueche" type="text" v-hasPermi="['archive:qwjs:addDjad']" icon="el-icon-tickets"
              @click="handleRegister(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- end 全文检索 -->

      <!-- start 全文/目录检索 -->
      <el-table-column v-if="isRetrieval" label="类型" align="center" width="125" fixed="left">
        <template slot-scope="scope">
          <el-select placeholder="请选择" v-model="scope.row.borrowType">
            <el-option v-for="item in scope.row.typeOption" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- end 全文/目录检索 -->

      <!-- start 全文检索 -->
      <el-table-column v-if="sourceType == 1" v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
        :width="col.TH_WIDTH == 'null' || col.TH_WIDTH == 0 || col.TH_WIDTH == undefined ? 200 : col.TH_WIDTH"
        :label="col.FIELD_CAPTION"
        :align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
        :header-align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
        :sortable="sortable" show-overflow-tooltip :render-header="renderHeader">
        <template slot-scope="scope">
          <div v-if="scope.row[col.FIELD_NAME] != null">
            <!--            <p v-if="col.FIELD_NAME == 'STATE'">-->
            <!--              <span v-for="(i, idx) in stateOption" :key="idx">-->
            <!--                {{ scope.row[col.FIELD_NAME] == i.value ? i.label : '' }}-->
            <!--              </span>-->
            <!--            </p>-->
            <p v-html="scope.row[col.FIELD_NAME]"></p>
          </div>
        </template>
      </el-table-column>
      <!-- end 全文检索 -->

      <!-- start 目录检索 -->
      <el-table-column v-if="sourceType != 1" v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
        :width="col.TH_WIDTH == 'null' || col.TH_WIDTH == 0 || col.TH_WIDTH == undefined ? 200 : col.TH_WIDTH"
        :label="col.FIELD_CAPTION"
        :align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
        :header-align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
        :sortable="sortable" show-overflow-tooltip :render-header="renderHeader">
        <template slot-scope="scope">
          <div v-if="scope.row[col.FIELD_NAME] != null">
            <p v-if="col.FIELD_NAME == 'STATE'">
              <span v-for="(i, idx) in stateOption" :key="idx">
                {{ scope.row[col.FIELD_NAME] == i.value ? i.label : '' }}
              </span>
            </p>
            <p v-else-if="col.FIELD_NAME == 'IS_ZUJUAN'">
              {{ scope.row[col.FIELD_NAME] == '1' ? '是' : '否' }}
            </p>
            <p v-else-if="col.SHOWTYPE == 5">
              <span v-for="(i, idx) in dictList[col.FIELD_NAME]" :key="idx">
                {{ scope.row[col.FIELD_NAME] == i.dictValue ? i.dictLabel : '' }}
              </span>
            </p>
            <p v-else v-html="scope.row[col.FIELD_NAME]"></p>
          </div>
        </template>
      </el-table-column>
      <!-- end 目录检索 -->

    </el-table>
  </div>
</template>

<script>
var datalist;
import { getTypeObject } from '@/api/archive/dict/dictManageData'
import { scrollFunction } from '@/utils/table-Scroll.js'
export default {

  //  props: ["tableHeaderList", "tableData", "loading", "tableHeight", "isRetrieval", "isOpenFinds"],
  props: {
    // :iskfjdorbgqx="0"  开放鉴定   :iskfjdorbgqx="1" 保管期限   :iskfjdorbgqx="2" 销毁
    iskfjdorbgqx: {
      type: [String, Number],
      default: 0
    },
    //isRyType  //判断初审标记分配还是复审标记分配
    isRyType: {
      type: [String, Number],
      default: 0
    },
    //isChuSHen      开放档案初审 列表是否展示，默认不展示，传true 是展示
    isChuSHen: {
      type: Boolean,
      default: false
    },
    //isFuSHen   开放档案复审 列表是否展示，默认不展示，传true 是展示
    isFuSHen: {
      type: Boolean,
      default: false
    },
    // isShending 开放审定 默认不展示，传true 是展示
    isShending: {
      type: Boolean,
      default: false
    },
    //isShenjl  审核记录 默认不展示，传true 是展示
    isShenjl: {
      type: Boolean,
      default: false
    },
    //开放档案鉴定  详情页面    默认不展示，传true 是展示
    isKFJDDetail: {
      type: Boolean,
      default: false
    },

    //开放档案鉴定  调档页面    默认不展示，传true 是展示
    isKFJDDD: {
      type: Boolean,
      default: false
    },
    // isSelection      复选框是否显示 false 隐藏  true 显示
    isSelection: {
      type: Boolean,
      default: true
    },
    // isProjectJuanList 操作  （修改是否显示） true 显示   false隐藏
    isProjectJuanList: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: [String, Number],
      default: {}
    },
    isRetrieval: {
      type: Boolean,
      default: false
    },
    isOpenFinds: {
      type: Boolean,
      default: false
    },
    tableHeaderList: {
      type: [Array, Object, String],
      default: {}
    },
    tableData: {
      type: [Array, Object, String],
      default: {}
    },
    sourceType: {
      type: String,
      default: ""
    },
  },
  archive_Dicts: ['MJ', 'BGQX', 'IS_OPENS', 'CSLY', 'JS_TYPE'],
  watch: {
    tableData: {
      handler(val) {

      },
      immediate: true
    },

    //同步请求
    // tableHeaderList:{
    //     async handler(val) {
    //         for (var i = 0; i < this.tableHeaderList.length; i++) {
    //             if (this.tableHeaderList[i].SHOWTYPE == 5) {
    //                 await getDicts_archive(this.tableHeaderList[i].FIELD_NAME).then((res) => {
    //                     this.dictList[this.tableHeaderList[i].FIELD_NAME] = res.data;
    //                 })

    //             }
    //         }
    //          this.dictList=this.dictList;
    //          console.log(this.dictList,"+++")
    //     },
    //     immediate: true
    // }
    tableHeaderList: {
      handler(val) {
        var headerlist = [];
        for (var i = 0; i < this.tableHeaderList.length; i++) {
          if (this.tableHeaderList[i].SHOWTYPE.toString().indexOf('5') != -1) {
            this.tableHeaderList[i].SHOWTYPE = 5
          }
          if (this.tableHeaderList[i].SHOWTYPE == 5) {
            // console.log(this.tableHeaderList[i])
            headerlist.push(this.tableHeaderList[i].FIELD_NAME)
          }
        }
        // console.log(headerlist,"++++")
        if (headerlist.length > 0) {
          getTypeObject(headerlist).then((res) => {
            this.dictList = res.data;
          })
        }


      },
      immediate: true
    }
  },

  data() {
    return {
      ids: [],
      single: "",
      multiple: "",
      sortable: "custom",
      orderList: "",
      dictList: {},  //字典项

      /*1:预归档-未接收
      2:预归档-已接收
      3:数字化成果未接收
      4:归档审批中
      5:已归档
      6:移交审批中
      7:已移交
      8:销毁
      9:预归档审批中
      10:预归档*/
      stateOption: [
        { value: 1, label: '预归档-未接收' },
        { value: 2, label: '预归档-已接收' },
        { value: 3, label: '数字化成果未接收' },
        { value: 4, label: '归档审批中' },
        { value: 5, label: '已归档' },
        { value: 6, label: '移交审批中' },
        { value: 7, label: '已移交' },
        { value: 8, label: '销毁' },
        { value: 9, label: '预归档审批中' },
        { value: 10, label: '预归档' },
      ],

      // 1= 销毁  0=不销毁
      XH: [
        { value: "1", label: '销毁' },
        { value: "0", label: '不销毁' },
      ]

    }
  },
  mounted() {
    // 自己随便设置个id， el-table res="historyTable"
    this.$refs.reftable.bodyWrapper.id = 'historyshop'
    scrollFunction(this.domObj, 'historyshop')
  },
  updated() {
    this.$refs["reftable"].doLayout();
  },
  created() {

  },
  methods: {
    clearSort() {
      this.$refs.reftable.clearSort()    // 即可清除排序解决
    },
    //审查
    shengchaclick(row) {
      this.$emit("shengchaclick", row)
    },
    // 复选框判断不能选择
    checkboxTchu(row) {



      if (row.CHUSHEN_JIANDING == null) {
        return false;//禁用
      } else {
        return true;//不禁用
      }


    },


    // 复选框判断不能选择
    checkboxTfu(row) {


      if (row.FUSHEN_JIANDING == null) {
        return false;//禁用
      } else {
        return true;//不禁用
      }




    },

    //修改 type
    onBlurDeitTap(val, type) {
      if (type == 1) {
        for (var i in this.tableData) {
          if (this.tableData[i].ID == val.ID) {
            this.tableData[i].CHUSHEN_LIYOU = ""
          }
        }

      }
      console.log(val, "+++")
      this.$emit("onBlurDeitTap", val, type)
    },
    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // 新建一个 span
      let span = document.createElement('span');
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 120;
      // 移除 document 中临时的 span
      document.body.removeChild(span);

      // var element = document.querySelector('.el-table__body-wrapper');
      // element.style.height = this.tableHeight - 52 + "px"

      return h('span', column.label);
    },


    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.$emit("handleSelectionChange", this.ids, this.single, this.multiple, selection)
    },


    //双击进入详情
    celldblclick(row, column, cell, event) {
      console.log(row,"-------liu")
      // if (row.is_borrowing_car == 1) {
      //   if (event.type === "dblclick") {
      //     //  console.log(row,column,cell,event)
      //     this.$emit("celldblclick", row)
      //   }
      // }

    },
    //开放审定查看
    handleQuery(row) {
      this.$emit("celldblclick", row)
    },
    // 接受一个obj参数
    sortChange(obj) {
      console.log(obj)  // 排序规则
      if (obj.order != null) {
        this.orderList = obj.prop + " " + obj.order.substring(0, obj.order.length - 6)
      } else {
        this.orderList = ""
      }

      // if (obj.order != null) {
      //     var order = obj.order.substring(0, obj.order.length - 6)
      //     if (this.orderList.length <= 0) {
      //         this.orderList.push({
      //             prop: obj.prop,
      //             order: order
      //         })
      //     } else {
      //         for (var i in this.orderList) {
      //             if (this.orderList[i].prop == obj.prop) {
      //                 this.orderList[i].order = order
      //             }
      //         }
      //     }
      // } else {
      //     for (var i in this.orderList) {
      //         if (this.orderList[i].prop == obj.prop && obj.order == null) {
      //             this.orderList.splice(i, 1)
      //         }
      //     }
      // }
      // console.log(this.orderList, "dsfjkl")
      this.$emit("sortChange", this.orderList)

    },

    // 借阅车
    handleBorrow(row) {
      this.$emit('handleBorrow', row)
    },

    //标记分配
    changeCheckBoxTap(value, row) {
      this.$emit("changeCheckBoxTap", value, row)
    },

    //项目下修改卷列表
    handleProjectJuanDeit(row) {
      this.$emit("handledeitTap", row)
    },

    //调整审定结果
    handleSDJGDeit(row) {
      this.$emit("handleSDJGDeit", row)
    },

    rowcontextmenu(row) {
      if (this.isRetrieval == true) {
        event.preventDefault()
        this.$emit("rowcontextmenu", row)
      }
    },

    // 登记单
    handleRegister(row) {
      this.$emit("handleRegister", row)
    }


  }
}
</script>
<style lang="scss" scoped>
.jieyueche {
  font-size: 18px;
  padding: 0;
  margin: 5%;
}

td>div {
  width: auto !important;
}
</style>
